<template>
	<view >
		<custom-navigation-bar title="订单列表"></custom-navigation-bar> 
		<view class="top_1">
			<view class="top_2">  
				<t v-for="(item,index) in statusArr" :key="index">
					<view v-if="item.id==status"  class="top_3 top_3_se" @click="setStatus(item)">
						{{item.name}}
					</view>
					<view v-if="item.id!=status"  class="top_3" @click="setStatus(item)">
						{{item.name}}
					</view>
				</t> 
			</view> 
		</view> 
		<view style="width: 100%;float: left;margin-top: 220rpx;"></view> 
		<view v-if="orders.length>0">
			<view  class="list-item" v-for="(item,index) in orders" :key="index" @click="deail(item)">
				<view class="list-shop-img">
					<image :src="item.thumbnail" class="list-shop-img1"></image>
				</view>
				<view class="list-item-content">
					<view class="list-item-content-title">
						{{item.name}}  
						<label class="status_def" v-if="item.status==0">待付款</label>
						<label class="status_def" v-if="item.status==1&&item.rechargeNo==null">待使用</label>
						<label class="status_def" v-if="item.status==1&&item.rechargeNo!=null">待充值</label>
						<label class="status_def" v-if="item.status==2">已完成</label>
						<label class="status_def" v-if="item.status==3">退款中</label>
						<label class="status_def" v-if="item.status==4">退款成功</label>
						<label class="status_def" v-if="item.status==5">已评论</label> 
					</view> 
					<view class="list-item-content-v">
						订单金额：{{item.money}}&nbsp;&nbsp;数量：{{item.nums}}
					</view> 
					<view class="list-item-content-v" v-if="item.status==0">
						下单时间：{{item.createTime}}
					</view>
					<view v-if="item.status==1||item.status==2||item.status==5">
						<view  class="list-item-content-v" v-if="item.payTime!=null">
							付款时间：{{item.payTime}}
						</view>
						<view class="list-item-content-v" v-if="item.useTime!=null">
							使用时间：{{item.useTime}}
						</view>
					</view>
					<view  class="list-item-content-v" v-if="item.status==3">
						申请退款时间：{{item.refundTime}}
					</view>
					<view  class="list-item-content-v" v-if="item.status==4">
						退款时间：{{item.refundTime}}
					</view>
				</view>
			</view>
			<view v-if="more" @click="getMore" style="width: 100%;height: 70rpx;line-height: 70rpx;text-align: center;color:#666666;">加载更多</view> 
			<view v-if="!more"  style="width: 100%;height: 70rpx;line-height: 70rpx;text-align: center;color: #666666;">无更多数据</view> 
		</view>
		<view v-if="orders.length==0" style="width: 100%;float: left;line-height: 80rpx;text-align: center;color: #666666;">
		 	暂无数据
		</view>
		<view style="width: 100%;height: 60rpx;float: left;"></view>
	</view>
</template>

<script setup>
	import CustomNavigationBar from '@/components/CustomNavigationBar.vue';
	import { ref } from "vue"; 
	import http from '../../../utils/http';
	const status=ref(null);
	const pageIndex=ref(1);
	const pageSize=ref(10);
	const more=ref(true);
	function getMore(){
		pageIndex.value=pageIndex.value+1;
		getOrders();
	}
	function deail(item){
		uni.navigateTo({
			url: "/pages/order/order_detail?isShow=a&id="+item.id
		});
	}
	const statusArr=ref([
		{
			id:null,
			name:'全部' 
		},
		{
			id:0,
			name:'待付款' 
		},
		{
			id:1,
			name:'待使用/待充值'
		},
		{
			id:2,
			name:'已完成' 
		},
		{
			id:3,
			name:'退款' 
		},
		{
			id:5,
			name:'已评论' 
		}
	]);
	console.log(statusArr.value)
	import {
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app';
	//销售订单
	const saleUserId=ref();
	//直推订单
	const butlerUserId=ref();
	//下级管家订单
	const upButlerUserId=ref();
	onLoad((query) => {
		status.value=query.status;
		console.log(status.value); 
		if(query.status=="null"){ 
			status.value=null;
		}
		if(query.saleUserId){
			saleUserId.value=query.saleUserId;
		}
		if(query.butlerUserId){
			butlerUserId.value=query.butlerUserId;
		}
		if(query.upButlerUserId){
			upButlerUserId.value=query.upButlerUserId;
		}
		getOrders();
	})
	
	function setStatus(item){
		status.value=item.id;
		pageIndex.value=1;
		getOrders();
	}
	const orders=ref([]);
	function getOrders(){
		uni.showLoading({
		 	title: '数据加载中',
		 	mask:true
		}); 
		http.request({
			url: "/butler/orders",
			method: "POST",
			data: {
				"userId":getApp().globalData.user.userId,
				goodsOrder:{
					"status":status.value,
					saleUserId:saleUserId.value,
					butlerUserId:butlerUserId.value,
					upButlerUserId:upButlerUserId.value
				}, 
				pageIndex:pageIndex.value,
				pageSize:pageSize.value
			}
		}).then((responseData) => {
			console.log(responseData)
			uni.hideLoading();
			  if(responseData.code==1){
				  if(responseData.data.length==0){
					  uni.showLoading({
					  	title: '无更多数据',
					  	mask:true
					  });
					  more.value=false;
					  uni.hideLoading();
				  }else{
					   more.value=true;
				  } 
				  if(pageIndex.value==1){
					  orders.value=responseData.data;
				  }else{
					  for(var i=0;i<responseData.data.length;i++){
						  orders.value.push(responseData.data[i])
					  }
				  }
			  }  
		}).catch((err) => {
			uni.hideLoading();
			uni.showToast({
				icon: 'error',
				title: '请求失败'
			}); 
		})
	}
</script>

<style>
	@import "../../list/list.scss"; 
	
	.top_1{
		position:fixed;top:150rpx;left:0rpx;height:80rpx;width: 100%;
	}
	.top_2{
		height:70rpx; width:100%;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;background: white;font-size: 26rpx;font-weight: bold;
	}
	.top_3{
		background-color:#fff;width:140rpx;margin-right:30rpx;display:inline-block;text-align: center;line-height: 70rpx;
	}
	.top_3_se{
		background-color:#fff;width:140rpx;margin-right:30rpx;display:inline-block;text-align: center;line-height: 70rpx;color: #2AE8DC;
	}
</style>